<template>
  <div id="userManager">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>预约管理</el-breadcrumb-item>
      <el-breadcrumb-item>顾客预约</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索框 -->
      <el-row :gutter="21" class="opt_div">
        <el-col :span="4">
          <el-input placeholder="请输入场地名称" v-model="venueName" size="mini"></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="venueType" placeholder="请选择场地类型" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option label="篮球场" value="1"></el-option>
            <el-option label="羽毛球场" value="2"></el-option>
            <el-option label="排球场" value="3"></el-option>
            <el-option label="足球场" value="4"></el-option>
            <el-option label="瑜伽室" value="5"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="searchUser">查询</el-button>
        </el-col>
      </el-row>
      <el-table :data="venueList" border size="mini">
        <el-table-column type="index" width="55"></el-table-column>
        <el-table-column prop="venueName" label="场地名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="venueType" label="场地类型" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <label v-if="scope.row.venueType=='1'">篮球场</label>
            <label v-if="scope.row.venueType=='2'">羽毛球场</label>
            <label v-if="scope.row.venueType=='3'">排球场</label>
            <label v-if="scope.row.venueType=='4'">足球场</label>
            <label v-if="scope.row.venueType=='5'">瑜伽室</label>
          </template>
        </el-table-column>
        <el-table-column prop="venuePrice" label="场地预约价格" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="venueImage" label="场地图片">
          <template slot-scope="scope">
            <el-image
                style="width: 70px; height: 100px"
                :src="scope.row.venueImage"
                fit="contain">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="venueAvailable" label="是否可用" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <label v-if="scope.row.venueAvailable=='0'">可用</label>
            <label v-if="scope.row.venueAvailable=='1'">不可用</label>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" plain size="small" @click="order(scope.row)">预约
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[3, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <el-dialog title="场地预约" :visible.sync="dialogToAdd" width="1000px" style="height: 500px;">
      <div>
        <span style="font-size: 15px">场地名称：{{this.dialog.title}}</span>
        <span style="font-size: 15px;margin-left: 100px">场地单价：{{this.dialog.price}}￥/小时</span>
      </div>
      <div class="block" style="margin-top: 15px;font-size: 15px">
        <span class="demonstration">预约日期：</span>
        <el-date-picker
            v-model= "dialog.date"
            value-format="yyyy-MM-dd"
            type="date"
            :picker-options="pickerOptions"
            @change="flushChecked()"
            placeholder="选择日期">
        </el-date-picker>
      </div>
      <div style="margin-top: 15px">
        <span style="font-size: 15px">时间选择：</span>
        <el-checkbox-group
            v-model="dialog.checkboxGroup"
            size="small"
            style="margin-top: 5px">
          <el-checkbox-button v-for="node in dialog.timeNode" :label="node.value" :disabled='isShow(node)' :key="node.key">{{node.value}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 30px">
        <el-row>
          <el-button type="primary" size="small" @click="addVenueOrder()">确定</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const Options = [
  {key: "9",value: '9~10'},
  {key: "10",value: '10~11'},
  {key: "11",value: '11~12'},
  {key: "12",value: '12~13'},
  {key: "13",value: '13~14'},
  {key: "14",value: '14~15'},
  {key: "15",value: '15~16'},
  {key: "16",value: '16~17'},
  {key: "17",value: '17~18'},
  {key: "18",value: '18~19'},
  {key: "19",value: '19~20'},
  {key: "20",value: '20~21'},
];
export default {
  name: "CustomerOrderManager",
  data() {
    return {
      dialogToAdd: false,
      venueName: "",
      venueType: "",
      venueList: [],
      pageIndex: 1,
      total: 0,
      pageSize: 3,
      dialog:{
        title: "",
        venueId: "",
        price: null,
        date: "",
        checkboxGroup:[],
        timeNode: Options,
        usedTime: [],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getVenueList(this.venueName, this.venueType, this.pageIndex, this.pageSize)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getVenueList(this.venueName, this.venueType, this.pageIndex, this.pageSize)
    },

    //查询所有用户信息
    getVenueList(venueName, venueType, pageIndex, pageSize) {
      var params = new URLSearchParams();
      params.append("venueName", venueName)
      params.append("venueType", venueType)
      params.append("pageIndex", pageIndex)
      params.append("pageSize", pageSize)
      this.$axios.post('/tb-venue-info/getVenueInfo', params).then(res => {
        this.venueList = res.data.data.list
        this.total = res.data.data.total
      }).catch(err => {
        console.log(err)
      })
    },

    //模糊查询
    searchUser() {
      this.pageIndex = 1
      this.getVenueList(this.venueName, this.venueType, this.pageIndex, this.pageSize)
    },

    order(row) {
      console.log(row);
      this.dialog.checkboxGroup = [];
      this.getNowTime();
      this.dialog.venueId = row.id;
      this.dialog.title = row.venueName;
      this.dialog.price = row.venuePrice;
      let params = new URLSearchParams();
      params.append("venueId", row.id);
      this.$axios.post('/tb-venue-order/getUsedVenueInfo', params).then(res => {
        this.dialog.usedTime = res.data.data;
        this.dialogToAdd = true;
      }).catch(err => {
        console.log(err)
      })
    },
    flushChecked(){
      this.$loading();
      let params = new URLSearchParams();
      params.append("venueId", this.dialog.venueId);
      params.append("venueDate", this.dialog.date);
      this.$axios.post('/tb-venue-order/getUsedVenueInfo', params).then(res => {
        this.dialog.usedTime = res.data.data;
        this.$loading().close();
      }).catch(err => {
        this.$loading().close();
        console.log(err)
      })
    },
    addVenueOrder(){
      this.$loading();
      let params = new URLSearchParams();
      params.append("venueId", this.dialog.venueId);
      params.append("venueDate", this.dialog.date);
      params.append("orderUser",JSON.parse(sessionStorage.getItem('user')).data.workId);
      params.append("venueTime",this.dialog.checkboxGroup);
      params.append("orderState",1);
      params.append("venuePrice",this.dialog.price);
      this.$axios.post('/tb-venue-order/insertVenueOrder', params).then(res => {
        this.dialogToAdd = false;
        console.log(res);
        this.$message.error(res.data.data)
        this.$loading().close();
      }).catch(err => {
        this.$loading().close();
        console.log(err)
      })
    },
    isShow(node){
      return this.dialog.usedTime.includes(node.key);
    },
    getNowTime() {
      let now = new Date()
      let year = now.getFullYear() // 得到年份
      let month = now.getMonth() // 得到月份
      let date = now.getDate() // 得到日期
      month = month + 1
      month = month.toString().padStart(2, '0')
      date = date.toString().padStart(2, '0')
      this.dialog.date = `${year}-${month}-${date}`;
    }


  },
  created() {
    this.getVenueList(this.venueName, this.venueType, this.pageIndex, this.pageSize)

  },

}
</script>
<style scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}

.search_input {
  margin-left: 10px;
}

.opt_div {
  display: flex;
}

.div_btn {
  /*display: flex;*/
  /*justify-content: right;*/
  margin-left: -132px;
}
</style>
